<template>
	<view class="container">
		<uni-nav-bar dark :fixed="true" background-color="white" color="black" right-icon="list">
			<view slot="left">
				<image src="../../static/yl-logo.png" style="height: 140rpx;width: 150rpx;" mode="heightFix"></image>
			</view>
		</uni-nav-bar>

		<view class="top">
			<view class="animate__animated animate__fadeInDown" hover-class="animated shake">
				<text><text>因联云</text>-致力成为您的技术合伙人</text>
			</view>
			<view class="animate__animated animate__slideInLeft">
				<text
					decode="true">APP开发&nbsp;&nbsp;·&nbsp;&nbsp;全平台小程序&nbsp;&nbsp;·&nbsp;&nbsp;物联网IOT&nbsp;&nbsp;·&nbsp;&nbsp;区块链</text>
			</view>
		</view>

		<view class="mid_ability">
			<view>
				<text>因联云拥有的技术开发能力</text>
			</view>
			<view class="grid animate__animated animate__fadeInUp">
				<view class="grid-item">
					<img src="../../static/img/3.jpg" alt="" />
					<view class="grid-title">
						<text>APP定制开发</text>
					</view>
					<view class="grid-intro">
						<text>多领域APP开发解决方案，满足各种业务需求</text>
					</view>
				</view>

				<view class="grid-item">
					<img src="../../static/img/4.jpg" alt="" />
					<view class="grid-title">
						<text>小程序定制开发</text>
					</view>
					<view class="grid-intro">
						<text>提供全平台的小程序定制开发服务，功能灵活多样</text>
					</view>
				</view>

				<view class="grid-item">
					<img src="../../static/img/5.jpg" alt="" />
					<view class="grid-title">
						<text>物联网&nbsp;&nbsp;·&nbsp;&nbsp;IOT</text>
					</view>
					<view class="grid-intro">
						<text>定制化设计，全场景实现，设备互联完美统一</text>
					</view>
				</view>

				<view class="grid-item">
					<img src="../../static/img/6.jpg" alt="" />
					<view class="grid-title">
						<text>教育子站</text>
					</view>
					<view class="grid-intro">
						<text>专注“教与学”，持续提升在线教学体验</text>
					</view>
				</view>
			</view>
		</view>

		<view class="mid_project">
			<view>
				<text>
					因联云在众多领域均拥有解决方案
				</text>
			</view>

			<view class="mid_card animate__animated animate__fadeInUp">
				<view class="mid_card_item">
					<view class="card_type">
						<text>社交/社群</text>
					</view>
					<view class="card_intro">
						<text>改变传统的社交方式，玩出新花样</text>
					</view>
					<view class="card_func">
						<text>核心功能点：<text>聊天短视频发帖与评论</text></text>
					</view>
					<hr />
					<view class="card_exam">
						<text>代表案例：</text>
						<img src="../../static/img/7.jpg" alt="" />
						<text>小红唇</text>
						<img src="../../static/img/8.jpg" alt="" />
						<text>日日煮</text>
					</view>
				</view>

				<view class="mid_card_item">
					<view class="card_type">
						<text>电商/团购</text>
					</view>
					<view class="card_intro">
						<text>提升行业效率，多渠道购物</text>
					</view>
					<view class="card_func">
						<text>核心功能点：<text>多种营销方式千人千面会员营销</text></text>
					</view>
					<hr />
					<view class="card_exam">
						<text>代表案例：</text>
						<img src="../../static/img/9.jpg" alt="" />
						<text>大润发优鲜</text>
						<img src="../../static/img/10.jpg" alt="" />
						<text>美菜</text>
					</view>
				</view>

				<view class="mid_card_item">
					<view class="card_type">
						<text>物联网&nbsp;&nbsp;·&nbsp;&nbsp;IOT</text>
					</view>
					<view class="card_intro">
						<text>你的手指，可以掌控万物</text>
					</view>
					<view class="card_func">
						<text>核心功能点：<text>物联通讯技术云端管理设备管理</text></text>
					</view>
					<hr />
					<view class="card_exam">
						<text>代表案例：</text>
						<img src="../../static/img/11.jpg" alt="" />
						<text>凹凸租车</text>
						<img src="../../static/img/12.jpg" alt="" />
						<text>UIOT智能家居</text>
					</view>
				</view>

				<view class="mid_card_item">
					<view class="card_type">
						<text>共享租赁</text>
					</view>
					<view class="card_intro">
						<text>大同社会下的有偿共享</text>
					</view>
					<view class="card_func">
						<text>核心功能点：<text>地图定位分时租赁</text></text>
					</view>
					<hr />
					<view class="card_exam">
						<text>代表案例：</text>
						<img src="../../static/img/13.jpg" alt="" />
						<text>衣二三</text>
						<img src="../../static/img/14.jpg" alt="" />
						<text>木鸟短租</text>
					</view>
				</view>
				
				<!-- <view class="mid_card_item">
						<view class="card_type">
							<text>O2O</text>
						</view>
						<view class="card_intro">
							<text>线上线下深度结合，牢牢抓住用户流量</text>
						</view>
						<view class="card_func">
							<text>核心功能点：<text>线上线下结合门店系统位置营销</text></text>
						</view>
						<hr />
						<view class="card_exam">
							<text>代表案例：</text>
							<img src="../../static/img/15.jpg" alt="" />
							<text>好慷在家</text>
							<img src="../../static/img/16.jpg" alt="" />
							<text>千丁社区</text>
							<img src="../../static/img/17.jpg" alt="" />
							<text>奈雪</text>
						</view>
					</view>
				
					<view class="mid_card_item">
						<view class="card_type">
							<text>知识付费</text>
						</view>
						<view class="card_intro">
							<text>精准推送，深度挖掘潜在客户，定制终端</text>
						</view>
						<view class="card_func">
							<text>核心功能点：<text>音视频在线会员身份体系</text></text>
						</view>
						<hr />
						<view class="card_exam">
							<text>代表案例：</text>
							<img src="../../static/img/18.jpg" alt="" />
							<text>美好明天</text>
							<img src="../../static/img/19.jpg" alt="" />
							<text>三毛游</text>
						</view>
					</view>
				
					<view class="mid_card_item">
						<view class="card_type">
							<text>政务系统</text>
						</view>
						<view class="card_intro">
							<text>通过信息化手段实现工作管理流程化</text>
						</view>
						<view class="card_func">
							<text>核心功能点：<text>大数据管理高效办公OA</text></text>
						</view>
						<hr />
						<view class="card_exam">
							<text>代表案例：</text>
							<img src="../../static/img/20.jpg" alt="" />
							<text>平安浙江</text>
							<img src="../../static/img/21.jpg" alt="" />
							<text>江苏政务</text>
						</view>
					</view>
				
					<view class="mid_card_item">
						<view class="card_type">
							<text>城市门户</text>
						</view>
						<view class="card_intro">
							<text>一键发送需求，精准分配对接，需求快速响应</text>
						</view>
						<view class="card_func">
							<text>核心功能点：<text>区域化管理城市周边建设地图</text></text>
						</view>
						<hr />
						<view class="card_exam">
							<text>代表案例：</text>
							<img src="../../static/img/22.jpg" alt="" />
							<text>健康甘肃</text>
							<img src="../../static/img/23.jpg" alt="" />
							<text>畅说108</text>
						</view>
					</view>
				
					<view class="mid_card_item">
						<view class="card_type">
							<text>在线教育</text>
						</view>
						<view class="card_intro">
							<text>完整的课程体系，多元化的课程学习模型</text>
						</view>
						<view class="card_func">
							<text>核心功能点：<text>在线学习考试系统题库系统</text></text>
						</view>
						<hr />
						<view class="card_exam">
							<text>代表案例：</text>
							<img src="../../static/img/24.jpg" alt="" />
							<text>红黄蓝</text>
							<img src="../../static/img/25.jpg" alt="" />
							<text>秀财会计</text>
						</view>
					</view>
				
					<view class="mid_card_item">
						<view class="card_type">
							<text>在线医疗</text>
						</view>
						<view class="card_intro">
							<text>提高医患互动，远程患者监测，提升服务质量</text>
						</view>
						<view class="card_func">
							<text>核心功能点：<text>数值监控报警提醒患者档案</text></text>
						</view>
						<hr />
						<view class="card_exam">
							<text>代表案例：</text>
							<img src="../../static/img/26.jpg" alt="" />
							<text>快问</text>
							<img src="../../static/img/27.jpg" alt="" />
							<text>快医</text>
						</view>
					</view>
				
					<view class="mid_card_item">
						<view class="card_type">
							<text>互联网金融</text>
						</view>
						<view class="card_intro">
							<text>塑造金融机构全新形象，让用户更加满意</text>
						</view>
						<view class="card_func">
							<text>核心功能点：<text>简化流程实时掌控信息</text></text>
						</view>
						<hr />
						<view class="card_exam">
							<text>代表案例：</text>
							<img src="../../static/img/28.jpg" alt="" />
							<text>和讯财经</text>
							<img src="../../static/img/29.jpg" alt="" />
							<text>储蓄罐</text>
						</view>
					</view>
				
					<view class="mid_card_item">
						<view class="card_type">
							<text>小众特色</text>
						</view>
						<view class="card_intro">
							<text>不一样的小而美，独具匠心不将就</text>
						</view>
						<view class="card_func">
							<text>核心功能点：<text>社区论坛精品小众领域</text></text>
						</view>
						<hr />
						<view class="card_exam">
							<text>代表案例：</text>
							<img src="../../static/img/30.jpg" alt="" />
							<text>CP</text>
							<img src="../../static/img/31.jpg" alt="" />
							<text>想去</text>
						</view>
					</view> -->
			</view>

<!-- 			<button class="getMoreBtn" v-if="isGetMore" @click="getMore">
				查看更多
			</button> -->

			<!-- <view class="mid_card_more"> -->
				<!-- <view class="mid_card"> -->
<!-- 					<view class="mid_card_item">
						<view class="card_type">
							<text>O2O</text>
						</view>
						<view class="card_intro">
							<text>线上线下深度结合，牢牢抓住用户流量</text>
						</view>
						<view class="card_func">
							<text>核心功能点：<text>线上线下结合门店系统位置营销</text></text>
						</view>
						<hr />
						<view class="card_exam">
							<text>代表案例：</text>
							<img src="../../static/img/15.jpg" alt="" />
							<text>好慷在家</text>
							<img src="../../static/img/16.jpg" alt="" />
							<text>千丁社区</text>
							<img src="../../static/img/17.jpg" alt="" />
							<text>奈雪</text>
						</view>
					</view>

					<view class="mid_card_item">
						<view class="card_type">
							<text>知识付费</text>
						</view>
						<view class="card_intro">
							<text>精准推送，深度挖掘潜在客户，定制终端</text>
						</view>
						<view class="card_func">
							<text>核心功能点：<text>音视频在线会员身份体系</text></text>
						</view>
						<hr />
						<view class="card_exam">
							<text>代表案例：</text>
							<img src="../../static/img/18.jpg" alt="" />
							<text>美好明天</text>
							<img src="../../static/img/19.jpg" alt="" />
							<text>三毛游</text>
						</view>
					</view>

					<view class="mid_card_item">
						<view class="card_type">
							<text>政务系统</text>
						</view>
						<view class="card_intro">
							<text>通过信息化手段实现工作管理流程化</text>
						</view>
						<view class="card_func">
							<text>核心功能点：<text>大数据管理高效办公OA</text></text>
						</view>
						<hr />
						<view class="card_exam">
							<text>代表案例：</text>
							<img src="../../static/img/20.jpg" alt="" />
							<text>平安浙江</text>
							<img src="../../static/img/21.jpg" alt="" />
							<text>江苏政务</text>
						</view>
					</view>

					<view class="mid_card_item">
						<view class="card_type">
							<text>城市门户</text>
						</view>
						<view class="card_intro">
							<text>一键发送需求，精准分配对接，需求快速响应</text>
						</view>
						<view class="card_func">
							<text>核心功能点：<text>区域化管理城市周边建设地图</text></text>
						</view>
						<hr />
						<view class="card_exam">
							<text>代表案例：</text>
							<img src="../../static/img/22.jpg" alt="" />
							<text>健康甘肃</text>
							<img src="../../static/img/23.jpg" alt="" />
							<text>畅说108</text>
						</view>
					</view>

					<view class="mid_card_item">
						<view class="card_type">
							<text>在线教育</text>
						</view>
						<view class="card_intro">
							<text>完整的课程体系，多元化的课程学习模型</text>
						</view>
						<view class="card_func">
							<text>核心功能点：<text>在线学习考试系统题库系统</text></text>
						</view>
						<hr />
						<view class="card_exam">
							<text>代表案例：</text>
							<img src="../../static/img/24.jpg" alt="" />
							<text>红黄蓝</text>
							<img src="../../static/img/25.jpg" alt="" />
							<text>秀财会计</text>
						</view>
					</view>

					<view class="mid_card_item">
						<view class="card_type">
							<text>在线医疗</text>
						</view>
						<view class="card_intro">
							<text>提高医患互动，远程患者监测，提升服务质量</text>
						</view>
						<view class="card_func">
							<text>核心功能点：<text>数值监控报警提醒患者档案</text></text>
						</view>
						<hr />
						<view class="card_exam">
							<text>代表案例：</text>
							<img src="../../static/img/26.jpg" alt="" />
							<text>快问</text>
							<img src="../../static/img/27.jpg" alt="" />
							<text>快医</text>
						</view>
					</view>

					<view class="mid_card_item">
						<view class="card_type">
							<text>互联网金融</text>
						</view>
						<view class="card_intro">
							<text>塑造金融机构全新形象，让用户更加满意</text>
						</view>
						<view class="card_func">
							<text>核心功能点：<text>简化流程实时掌控信息</text></text>
						</view>
						<hr />
						<view class="card_exam">
							<text>代表案例：</text>
							<img src="../../static/img/28.jpg" alt="" />
							<text>和讯财经</text>
							<img src="../../static/img/29.jpg" alt="" />
							<text>储蓄罐</text>
						</view>
					</view>

					<view class="mid_card_item">
						<view class="card_type">
							<text>小众特色</text>
						</view>
						<view class="card_intro">
							<text>不一样的小而美，独具匠心不将就</text>
						</view>
						<view class="card_func">
							<text>核心功能点：<text>社区论坛精品小众领域</text></text>
						</view>
						<hr />
						<view class="card_exam">
							<text>代表案例：</text>
							<img src="../../static/img/30.jpg" alt="" />
							<text>CP</text>
							<img src="../../static/img/31.jpg" alt="" />
							<text>想去</text>
						</view>
					</view>
				</view> -->
			<!-- </view> -->
		</view>

		<view class="mid_success">
			<view>
				<text>因联云已有300+案例成功交付</text>
			</view>

			<view class="success_brand_grid">
				<view class="success_brand_item">
					<image src="../../static/img/32.jpg" mode=""></image>
					<view class="brand_card">
						<view class="brand_title">
							<text>云橙</text>
						</view>
						<view class="brand_intro">
							<text>
								-&nbsp;智慧工作，快乐生活&nbsp;-
							</text>
						</view>
					</view>
				</view>

				<view class="success_brand_item">
					<image src="../../static/img/33.jpg" mode=""></image>
					<view class="brand_card">
						<view class="brand_title">
							<text>小鹿会员</text>
						</view>
						<view class="brand_intro">
							<text>
								-&nbsp;百草味旗下会员俱乐部&nbsp;-
							</text>
						</view>
					</view>
				</view>

				<view class="success_brand_item">
					<image src="../../static/img/34.jpg" mode=""></image>
					<view class="brand_card">
						<view class="brand_title">
							<text>红黄蓝</text>
						</view>
						<view class="brand_intro">
							<text>
								-&nbsp;多彩人生第一步！&nbsp;-
							</text>
						</view>
					</view>
				</view>

				<view class="success_brand_item">
					<image src="../../static/img/35.jpg" mode=""></image>
					<view class="brand_card">
						<view class="brand_title">
							<text>江苏政务</text>
						</view>
						<view class="brand_intro">
							<text>
								-&nbsp;政务服务“一张网”建设&nbsp;-
							</text>
						</view>
					</view>
				</view>

				<view class="success_brand_item">
					<image src="../../static/img/36.jpg" mode=""></image>
					<view class="brand_card">
						<view class="brand_title">
							<text>微鲸电商</text>
						</view>
						<view class="brand_intro">
							<text>
								-&nbsp;专注于家庭娱乐&nbsp;-
							</text>
						</view>
					</view>
				</view>

				<view class="success_brand_item">
					<image src="../../static/img/37.jpg" mode=""></image>
					<view class="brand_card">
						<view class="brand_title">
							<text>微鲸VR</text>
						</view>
						<view class="brand_intro">
							<text>
								-&nbsp;VR+直播，看你想看的&nbsp;-
							</text>
						</view>
					</view>
				</view>
				
				<view class="success_brand_item">
					<image src="../../static/img/38.jpg" mode=""></image>
					<view class="brand_card">
						<view class="brand_title">
							<text>明亚经济</text>
						</view>
						<view class="brand_intro">
							<text>
								-&nbsp;保险一条龙服务&nbsp;-
							</text>
						</view>
					</view>
				</view>
				
				<view class="success_brand_item">
					<image src="../../static/img/39.jpg" mode=""></image>
					<view class="brand_card">
						<view class="brand_title">
							<text>圆领</text>
						</view>
						<view class="brand_intro">
							<text>
								-&nbsp;技能电商交易平台&nbsp;-
							</text>
						</view>
					</view>
				</view>
			</view>
			
<!-- 			<button class="getMoreExamBtn" @click="getMoreExam" v-if="isGetMoreExam">
				查看更多案例
			</button> -->
		</view>
		
		<view class="footer_front animate__animated animate__fadeInUp">
			<view class="footer_front_headline">
				<text>流程专业化,交付更保证</text>
			</view>
			<view class="footer_front_grid">
				<view class="footer_front_item">
					<image src="../../static/img/44.jpg" mode=""></image>
					<view>
						<view class="footer_front_title">
							<text>用心的产品策划</text>
						</view>
						<view class="footer_front_intro">
							<text>产品自身需求剖析、竞品分析、使用场景分析</text>
						</view>
					</view>
				</view>
				
				<view class="footer_front_item">
					<image src="../../static/img/45.jpg" mode=""></image>
					<view>
						<view class="footer_front_title">
							<text>贴合的UI设计</text>
						</view>
						<view class="footer_front_intro">
							<text>根据产品属性进行页面设计，提高用户体验</text>
						</view>
					</view>
				</view>
				
				<view class="footer_front_item">
					<image src="../../static/img/46.jpg" mode=""></image>
					<view>
						<view class="footer_front_title">
							<text>规范的开发</text>
						</view>
						<view class="footer_front_intro">
							<text>规范的代码便于产品维护的迭代</text>
						</view>
					</view>
				</view>
				
				<view class="footer_front_item">
					<image src="../../static/img/47.jpg" mode=""></image>
					<view>
						<view class="footer_front_title">
							<text>完整的产品交付</text>
						</view>
						<view class="footer_front_intro">
							<text>提供全部的工作成果，不与客户发生任何绑定行为</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="footer_back">
			<view class="footer_info">
				<text>All Rights Reserved  联系电话：15810473391 </text>
			</view>
		</view>
	</view>
</template>


<script>
	import '@dcloudio/uni-ui'
	export default {
		data() {
			return {
				isGetMore: true,
				isGetMoreExam:true
			}
		},
		onLoad() {

		},
		methods: {
			getMore() {
				this.isGetMore = false
			},
			getMoreExam(){
				this.isGetMoreExam = false
			}
		}
	}
</script>

<style lang="scss">
	.top {
		width: 100%;
		height: 500rpx;
		background-image: url('../../static/img/2.jpg');
		background-size: 100% 500rpx;

		view:nth-child(1) {
			position: absolute;
			top: 160rpx;
			left: 90rpx;

			text {
				font-size: 40rpx;
				color: white;

				text {
					color: rgb(54, 172, 186);
				}
			}

		}

		view:nth-child(2) {
			position: absolute;
			top: 230rpx;
			left: 145rpx;

			text {
				font-size: 20rpx;
				color: white;
			}
		}
	}

	.mid_ability {
		width: 100%;
		height: 800rpx;
		// background-color: red;
		overflow: hidden;

		view:nth-child(1) {
			margin-top: 60rpx;
			margin-left: 152rpx;

			text {
				font-size: 38rpx;
				font-weight: bold;
			}
		}

		.grid {
			width: 100%;
			height: 600rpx;
			display: flex;
			flex-wrap: wrap;
			margin-top: 50rpx;

			.grid-item {
				width: 375rpx;
				margin: 0rpx;
				display: flex;
				flex-direction: column;
				align-items: center;

				img {
					width: 80rpx;
					height: 80rpx;
				}

				.grid-title {
					margin-top: 10rpx;

					text {
						font-weight: bold;
						font-size: 28rpx;
					}
				}

				.grid-intro {
					margin-top: 10rpx;
					display: flex;

					text {
						font-weight: normal;
						font-size: 25rpx;
						text-align: center;
						color: #737373;
						line-height: 30rpx;
						padding: 0rpx 35rpx;
					}
				}
			}
		}
	}

	.mid_project {
		width: 750rpx;
		height: 1900rpx;
		background-color: #eff3f6;

		view:nth-child(1) {
			padding: 70rpx 80rpx 30rpx 80rpx;

			text {
				font-size: 38rpx;
				font-weight: bold;
			}
		}

		.getMoreBtn {
			margin: 40rpx auto;
			width: 320rpx;
			height: 100rpx;
			border-radius: 100rpx;
			border: 6rpx solid #60a7b0;
			color: #65a7a8;
		}
	}

	.mid_card_item {
		margin: 15rpx 20rpx;
		padding: 30rpx !important;
		border: 1px solid #ffffff;
		border-radius: 10rpx;
		background-color: #ffffff;

		hr {
			background-color: #dbdbd8;
			border: none;
			height: 1px;
		}

		.card_type {
			padding: 0rpx !important;
			margin-bottom: 18rpx;

			text {
				font-size: 32rpx !important;
			}
		}

		.card_intro {
			margin-bottom: 40rpx;

			text {
				font-size: 28rpx !important;
				color: #c0c0c0 !important;
				font-weight: normal !important;
			}
		}

		.card_func {
			margin-bottom: 60rpx;

			text {
				font-size: 24rpx !important;
				color: #c0c0c0 !important;
				font-weight: normal !important;

				text {
					color: #20aaa6 !important;
					font-weight: normal !important;
				}
			}
		}

		.card_exam {
			padding: 25rpx 25rpx 0rpx 0rpx;

			img {
				position: relative;
				top: 4rpx;
				margin: 0rpx 10rpx 0rpx 10rpx;
				width: 24rpx;
				height: 24rpx;
			}

			text {
				font-size: 24rpx !important;
				color: #c0c0c0 !important;
				font-weight: normal !important;
			}
		}
	}

	.mid_card_more {
		width: 750rpx;
		height: 3200rpx;
		background-color: #eff3f6;

		.mid_card {
			margin: 0rpx !important;
			padding: 0rpx !important;
		}
	}

	.mid_success {
		// background-color: red;
		width: 750rpx;
		height: 1900rpx;
		// position: relative;
		// top:0rpx;

		view:nth-child(1) {
			margin: 60rpx 60rpx 40rpx 110rpx;

			text {
				font-size: 38rpx;
				font-weight: bold;
			}
		}

		.success_brand_grid {
			height: 100%;
			width: 750rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-around;

			.success_brand_item {
				width: 330rpx;
				height: 330rpx;
				margin: 0 !important;

				image {
					width: 330rpx;
					height: 330rpx;
				}

				.brand_card {
					width: 300rpx;
					height: 150rpx;
					position: relative;
					// position: absolute;
					bottom: 60rpx;
					left: 10rpx;
					background-color: white;
					display: flex;
					flex-direction: column;
					align-items: center;
					border: 2px solid #f6f6f6;
					box-shadow: 10rpx 5rpx 5rpx #737373;

					.brand_title {
						margin: 0rpx !important;
						padding-top: 30rpx;

						text {
							font-size: 30rpx !important;
							font-weight: normal !important;
						}
					}

					.brand_intro {
						height: 80rpx;

						text {
							width: 100%;
							line-height: 80rpx;
							padding: 10rpx;
							color: #abaaa6;
							font-size: 22rpx;
							font-weight: normal;
						}
					}
				}
			}
		}
		
		.getMoreExamBtn {
			margin: 20rpx auto;
			width: 320rpx;
			height: 100rpx;
			border-radius: 100rpx;
			border: 6rpx solid #61abae;
			color: #46b5b2;
		}
	}
	
	.footer_front{
		// background-color: #eff3f6;
		margin-top: 120rpx;
		.footer_front_headline{
			padding: 40rpx 180rpx 40rpx 180rpx;
			text{
				font-size: 34rpx!important;
				font-weight: bold!important;
			}
		}
		.footer_front_grid{
			.footer_front_item{
				image{
					width: 100rpx;
					height: 100rpx;
					margin-right: 20rpx;
				}
				display: flex;
				padding:10rpx 30rpx;
				view{
					.footer_front_title{
						text{
							font-size: 28rpx;
							font-weight: bold;
						}
					}
					.footer_front_intro{
						text{
							font-size: 22rpx;
							color: #b6b6b6;
						}
					}
				}
			}
		}
	}
	
	.footer_back{
		margin-top: 50rpx;
		background-color: #181c25;
		padding: 0rpx 180rpx;
		.footer_info{
			text{
				font-size: 16rpx;
				color: white;
			}
		}
	}
</style>